<template>
	<div class="hell">

		<div class="paycodebackground">
			
		
		<van-password-input :value="value" :info="$t('message.global.entera')" class='paycode' :focused="showKeyboard" @focus="showKeyboard = true" />
		<div style="width: 100%;text-align: center;margin-top: 80px;">

			<van-button @click='register()' style="border-radius:0.3125rem;  width: 18.59375rem;background: linear-gradient(to bottom, rgba(98, 209, 177, 1),  rgba(1, 205, 152, 1)); box-shadow: 0px 7px 12px -2px rgba(1, 205, 152, 0.3); border: none;color: #fff;text-align: center;font-size: 1rem;" type="default">
			
				{{$t('message.global.accomplish')}}
			</van-button>

		</div>
		</div>
		<van-number-keyboard
  :show="showKeyboard"
  @input="onInput"
  @delete="onDelete"
  @blur="showKeyboard = false"
/>
	</div>
</template>

<script>
	import 'vant/lib/button/style';
	export default {
		data() {
			return {
				value: '',
				againpassword: '',
				showKeyboard: true,
				show:true
			}
		},
		mounted() {
			console.log(this.$route.query)

		},
		methods: {
			onInput(key) {
				
		      this.value = (this.value + key).slice(0, 6);
		    },
		    onDelete() {
		    	
		      this.value = this.value.slice(0, this.value.length - 1);
		    },
			onClickLeft() {
				this.$router.go(-1)
			},
			//			完成
			register() {
				if(this.$route.query.referrer_uid==''){
					var json = {
					  "country_code": this.$store.state.showFooter,
					  "mobile": this.$route.query.mobile,
					  "password": this.$route.query.password,
					  "pin_code": this.$route.query.pin_code,
					  'security_password':this.value,
					  				
				}
					
				}else{
					var json = {
					  "country_code": this.$store.state.showFooter,
					  "mobile": this.$route.query.mobile,
					  "password": this.$route.query.password,
					  "pin_code": this.$route.query.pin_code,
					  'security_password':this.value,
					  'referrer_uid':this.$route.query.referrer_uid,				
				}
				}
				
				if(this.value.length>=6){
					this.$post('member/user/mobile_register',json )
					.then((response) => {						
						this.$router.push('/download')												
					})
					.catch((error)=>{
						console.log(error)
						// this.$toast(this.$error[error.response.data.code])	
						      
						
					})
				}else{
					this.$toast({
                      message: this.$t('message.global.Incorrectpassword'),
                     duration: 800 
                  })
					
				}

			}
		}
	}
</script>

<style scoped>
	.van-nav-bar {
		/*background: linear-gradient(blue, pink);*/
		background: linear-gradient(to right, #FF6348, #ff755d, #FFC267)
	}
	
	.registercen {
		padding: 0rem 1rem;
		text-align: left;
		line-height: 1.875rem;
		font-size: 0.8125rem;
		color: rgba(166, 166, 166, 1);
	}
	
	.van-nav-bar__title {
		color: #fff;
	}
	
	.van-nav-bar .van-icon {
		color: #fff;
	}
	.hell{
	
	}
	.paycodebackground{
		margin-top: 3.125rem;
	}
	.van-password-input__security li{
		border: 0.03125rem solid #F5F5F5;	
	}
	.van-number-keyboard{
		background: #F5F5F5;	
	}
</style>